@charset "UTF-8";
@import url(keyframes.css);

/* <h1>婚礼时间</h1>*/
.seven h1{
    text-align: right;
    margin-right: 5%;
    margin-top: 3%;
    font-family: hole;
    font-size: 3em;
}
/* <h2>来吃糖呀！</h2> */              
.seven h2{
    text-align: right;
    font-family: mading;
    font-size: 2em;
    margin-right: 5%;
    margin-bottom: 1%;
}

/*<h3>婚礼地址</h3> */
.seven h3{
    font-family: mading;
    font-size: 2em;
    margin-top: 1%;
}

.sevenpic{
    width:100%;
    height: 30%;
    text-align: left;
    background: rgb(219, 193, 168);
    
    /* overflow: hidden; */
}
.sevenpic img{
    width: 30%;
    /* height: 20%; */
    border-radius: 45%;
    border: 5px solid rgb(219, 193, 168);
    margin-top: -12%;
    margin-left: 8%;
}

#sevenmap{
    width: 80%;
    height: 50%;
    margin-top: -8%;
    margin-left: 10%;
    border: 5px solid rgb(219, 193, 168);

    border-radius: 10%;
    overflow: hidden;
    position: relative;
    background: #878e98;

    color: #fff;
    font-family: mading;
}
/* #sevenmap img{
    width: 100%;
    height: 100%;
} */
#sevenmap h3{
    font-size: 2.5em;
    margin-top: 5%;  
}
#sevenmap h4{
    font-size: 2em;
    margin-top: 5%;  
}
#sevenmap iframe{
    width: 100%;
    height: 100%;
}

#sevencoupleimg{
    position: fixed;
    top:10%;
    left: 45%;
}
@media only screen and (max-device-width:320px) {
    .seven h1{
        font-size: 2em;
    }  
    .seven h2{
        font-size: 1em;
    } 
    .seven h3{
        font-size: 1em;
    } 

    #sevencoupleimg{
        transform: scale(0.6);
        top: 9%;
        left: 35%;
    }
    #sevenmap{
        margin-top:-30%;
        height: 50%;
    }
    #sevenmap h3{
        font-size: 1em;
        margin-top: 50%;
    }
    #sevenmap h4{
        font-size: .8em;
    }
    .sevenpic img{
        width: 35%;
        margin-top: -10%;

    }
    .sevenpic{
        margin-top: 5%;
    }
}
@media only screen and (max-device-width:539px)  and (min-device-width:321px) {
    .seven h1{
        font-size: 2em;
    }  
    .seven h2{
        font-size: 1em;
    } 
    .seven h3{
        font-size: 1em;
    } 

    #sevencoupleimg{
        transform: scale(0.6);
        top: 9%;
        left: 35%;
    }
    #sevenmap{
        margin-top:-30%;
        height: 45%;
    }
    #sevenmap h3{
        font-size: 1em;
        margin-top: 50%;
    }
    #sevenmap h4{
        font-size: .8em;
    }
    .sevenpic img{
        width: 35%;
        margin-top: -10%;

    }
    .sevenpic{
        margin-top: 5%;
    }
}

@media only screen and (max-device-width:540px) and (min-device-width:540px){
    .seven h1{
        font-size: 2em;
    }  
    .seven h2{
        font-size: 1em;
    } 
    .seven h3{
        font-size: 1em;
    } 

    #sevencoupleimg{
        transform: scale(0.6);
        top: 9%;
        left: 35%;
    }
    #sevenmap{
        margin-top:-30%;
        height: 60%;
    }
    #sevenmap h3{
        font-size: 1em;
    }
    #sevenmap h4{
        font-size: .8em;
    }
    .sevenpic img{
        width: 35%;
        margin-top: -10%;

    }
    .sevenpic{
        margin-top: 5%;
    }
}


/* 横屏 */
@media screen and (min-device-width:600px) and (max-device-width:1024px) and (min-device-height:650px){
    #sevenmap {
        margin-top: -10%;
        height: 50%;
    }

}

/* 手机横屏 */
@media screen and (min-device-width:560px) and (max-device-width:900px) and (max-device-height:500px){
    .seven h1{
        font-size: 2em;
    }  
    .seven h2{
        font-size: 1em;
    } 
    .seven h3{
        font-size: 1em;
    } 
    #sevenmap {
        margin-top: -5%;
        height: 40%;
    }
    #sevenmap h3{
        font-size: 1.5em;
        margin-top: 0%;
    }
    #sevenmap h4{
        font-size: 1em;
    }

}
@media screen and (min-device-width:768px) and (max-device-width:770px) and (min-device-height:900px){
    #sevenmap {
        margin-top: -30%;
        height: 65%;
    }
    #sevenmap h3{
        margin-top: 30%;
    }
}
@media screen and (min-device-width:1024px) and (min-device-height:1000px) {
    #sevenmap {
        margin-top: -30%;
        height: 65%;
    }
}